<template>

	<div class="container">
	
		
		 <h3>注册</h3>
		    <form>
		        用户名：<input type="text" v-model="myForm.username"/><br>
		        密码：<input type="password" v-model="myForm.password" /><br>
		        确认密码：<input type="password" v-model="myForm.beginpassword" /><br>
		        性别：<input type="radio" v-model="myForm.sex" value="0" />男
		             <input type="radio" v-model="myForm.sex" value="1" />女<br>
		        爱好：<input type="checkbox" v-model="myForm.like" value="0" />读书
		             <input type="checkbox" v-model="myForm.like" value="1" />体育
		             <input type="checkbox" v-model="myForm.like" value="2" />旅游<br>
					 <!-- 
					  
						multiple  允许多选     v-model="myForm.nationality"  : Array
						size="5"
					  
					  
					  -->
		        <!-- 国籍：<select v-model="myForm.nationality" multiple size="5" > -->
		        国籍：<select v-model="myForm.nationality"  >
		                <option value="0">中国</option>
		                <option value="1">美国</option>
		                <option value="2">英国</option>
		                <option value="2">英国</option>
		                <option value="2">英国</option>
		                <option value="2">英国</option>
		                <option value="2">英国</option>
		                <option value="2">英国</option>
		                <option value="2">英国</option>
		                <option value="2">英国</option>
		                <option value="2">英国</option>
		                <option value="2">英国</option>
		                <option value="2">英国</option>
		                <option value="2">英国</option>
		                <option value="2">英国</option>
		                <option value="2">英国</option>
		                <option value="2">英国</option>
		                <option value="2">英国</option>
		             </select><br>
		        个人简介：<textarea v-model="myForm.brief" rows="5" cols="30"></textarea><br>
		             <input type="button" value="提交" @click="handler" />
		    </form>
			
			
			
			
			<div>
				<input   v-model.trim="dataTrim" />
				--dataTrim:{{dataTrim}}---
			</div>
			
			
			<div>
				<input   v-model="dataNumber1" />     --{{dataNumber1}}+1:{{dataNumber1+1}}--- {{typeof(dataNumber1)}}--- <br>
				<input   v-model.number="dataNumber2" />     --{{dataNumber2}}+1:{{dataNumber2+1}}--- {{typeof(dataNumber2)}}--- <br>
			</div>
			
			<div>
				
				<input type="text" v-model.lazy="dataLazy">
				
				
			</div>
			
			
	</div>
	
	
</template>

<script>
	
	
	export default{
		name:'MyForm',
		watch:{
			dataLazy(v1,v2){
				console.log("v1:"+v1+"   v2:"+v2)
			}
		},
		data(){
			return {
				dataTrim:'',
				dataNumber1:0,
				dataNumber2:0,
				dataLazy:'',
				myForm:{
					username: '',
					password: '',
					beginpassword: '',
					sex: 0,
					like: [0, 1, 2],
					nationality:0,
					brief: '',
					level: 0
				}
			}
		},
		methods:{
			handler(){
				//通过ajax 将数据发送到 Servlet   -- Service  --Dao  -- save（）；
			   console.log(this.myForm)
			}
		},
	
		
		
		
	}
	
	
</script>

<style scoped>
	
	/**  v --> viewport */
	.container{
		margin: 50px;
		background-color: azure;
		width: 100vw;
		height: 100vh;
	}
	
	
</style>